<template>
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="error-alarm">
      <div class="tab-head">
        <div class="left">
          <el-tabs v-model="dateType" @tab-click="changeTime">
            <el-tab-pane label="近一日" name="1" />
            <el-tab-pane label="近一周" name="2" />
            <el-tab-pane label="近一月" name="3" />
            <el-tab-pane label="自定义" name="custom" />
          </el-tabs>
          <el-date-picker
            v-if="dateType == 'custom'"
            v-model="pickTime"
            type="daterange"
            size="small"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            @change="changeTime"
          />
        </div>
        <!-- <el-input
        style="width: 250px"
        placeholder="请输入内容"
        v-model="search"
        size="small"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input> -->
      </div>
      <div class="tab-body">
        <left-body
          ref="left_body"
          :product-obj="productObj"
          :fail-obj="failObj"
          @emitFailSel="getFailSel"
          @emitProSel="getProSel"
        />
        <div v-if="timeArr.length > 0" class="body-right">
          <div class="rows">
            <el-row v-for="(item, index) in timeArr" :key="index">
              <div style="width: 50px" class="iconCol">
                <i class="el-icon-s-help" style="color: #0000ff; font-size: 20px" />
                <u v-if="index != timeArr.length - 1" />
              </div>
              <div class="right">
                <div class="time-head">
                  <span>{{ item.operationTime }}</span>
                  <span class="type">{{ item.jobName }}</span>
                  <el-tag v-if="item.productTypeName" effect="plain" size="mini">{{ item.productTypeName }}</el-tag>
                  <el-button
                    size="mini"
                    type="text"
                    style="margin-left: 20px"
                    @click="showDetails(item)"
                  >查看原始报文</el-button>
                </div>
                <div class="time-body">
                  <el-collapse v-model="activeNames">
                    <el-collapse-item v-if="item.reasonList && item.reasonList.length > 0" :name="index">
                      <template slot="title">
                        <el-tooltip :content="item.reasonList && item.reasonList[0].message" placement="top">
                          <span style="display:inline-block;max-width:calc(100% - 30px);white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">错误信息：{{ item.reasonList && item.reasonList[0].message }}</span>
                        </el-tooltip>
                      </template>
                      <template v-if="item.reasonList && item.reasonList.length > 1">
                        <div v-for="i in item.reasonList.slice(1)" :key="i.id" class="msgrow">
                          错误信息：
                          {{ i.message }}
                        </div>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </el-row>
          </div>
          <pagination
            v-if="total > 0"
            :total="total"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            @pagination="getRight"
          />
        </div>
        <div v-else class="body-right empty-box">暂无数据</div>
      </div>
      <detail-dialog ref="detail" :log-data="logData" />
    </div>
  </div>
</template>

<script>
import DetailDialog from './components/detailDialog.vue'
import { ruleLogProductList, failReasonList, ruleLogRecordEsList } from '@/api/milkyway/errorAlarm'
import LeftBody from './components/leftBody.vue'
export default {
  components: { DetailDialog, LeftBody },
  data() {
    return {
      loading: false,
      // 日期选择
      dateType: '1',
      // 日期选择器
      pickTime: [],
      // 自定义时间
      startTime: '',
      endTime: '',
      // 搜索框内容
      search: '',
      // 产品类型编码数组
      productCodes: this.$route.query.id ? [this.$route.query.id] : [],
      // 异常错误编码数组
      failCodes: [],
      // 产品对象
      productObj: {
        ruleLogProductList: [],
        typeName: ''
      },
      // 失败对象
      failObj: {
        failReasonList: [],
        typeName: ''
      },
      logData: '',
      // 右侧列表数量
      total: 0,
      // 查询参数
      queryParams: {
        size: 10,
        current: 1
      },
      // 右侧结构列表
      timeArr: [],
      // 折叠展开的
      activeNames: ['']
    }
  },
  mounted() {
    this.getLeft()
  },
  methods: {
    // 改变时间
    changeTime() {
      this.startTime = ''
      this.endTime = ''
      if (this.dateType === 'custom') {
        if (this.pickTime?.length > 0) {
          this.startTime = this.pickTime[0]
          this.endTime = this.pickTime[1]
        }
      } else if (this.dateType !== 'custom') {
        this.pickTime = []
      }
      this.getLeft()
    },
    // 获取左侧列表
    getLeft() {
      const query = {
        searchType: this.dateType,
        startTime: this.startTime,
        endTime: this.endTime
      }
      ruleLogProductList(query).then((res) => {
        this.productObj = res
      })
      this.getFailObj()
      this.$refs.left_body.productCodes = this.productCodes
      this.$refs.left_body.failCodes = this.failCodes
    },
    // 获取异常对象
    getFailObj() {
      const query = {
        searchType: this.dateType,
        startTime: this.startTime,
        endTime: this.endTime,
        productCodes: this.productCodes
      }

      failReasonList(query).then((res) => {
        this.failObj = res
      })
      this.getRight()
    },
    // 获取右侧列表
    getRight() {
      this.loading = true
      this.queryParams.scrollToTop = true
      const query = {
        searchType: this.dateType,
        startTime: this.startTime,
        endTime: this.endTime,
        productCodes: this.productCodes,
        failCodes: this.failCodes,
        ...this.queryParams
      }

      ruleLogRecordEsList(query).then((res) => {
        this.total = res.total
        this.timeArr = res.list
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    // 产品列表变化
    getProSel(val) {
      this.productCodes = val
      this.getFailObj()
    },
    // 左侧值变化
    getFailSel(val) {
      console.log(val)
      this.failCodes = val
      this.getRight()
    },

    // 展示错误报文
    showDetails(item) {
      this.logData = item.logData
      this.$refs.detail.open = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-button--mini{
  font-size:14px;
}
#app.dark-theme{
  .el-collapse-item{
    background:#092253;
  }
  .empty-box{
    color:#fff !important;
  }
}
.error-alarm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .tab-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #f1f1f1;
    .left {
      display: flex;
      align-items: center;
      .el-tabs {
        margin-right: 20px;
      }
    }
    .input-with-select {
      &::v-deep {
        .el-input__inner {
          border-right: 0px;
          outline: none !important;
          &:focus {
            border-color: rgba($color: #c0c4cc, $alpha: 0.5) !important;
            outline: none !important;
          }
        }
      }
    }
  }
  .tab-body {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    .left-container {
      height: 100%;
      width: 250px;
      overflow: auto;
    }
    .body-right {
      flex: 1;
      padding: 20px;
      border-left: 1px solid #f1f1f1;
      font-size: 14px;
      height: 100%;
      overflow: auto;
      position: relative;
      .rows {
        height: calc(100% - 50px);
        overflow: auto;
      }
      .el-row {
        display: flex;
        .right {
          flex: 1;
          padding-bottom: 20px;
          overflow: auto;
          span{
            font-size: 14px;
          }
        }
      }
    }
    .empty-box {
      justify-content: center;
      align-items: center;
      display: flex;
    }
    .iconCol {
      display: flex;
      justify-content: center;
      position: relative;

      u {
        position: absolute;
        top: 20px;
        left: 50%;
        height: calc(100% - 20px);
        border: 1px solid #f1f1f1;
        transform: translateX(-50%);
      }
    }
    .time-head {
      span{
        font-size: 14px !important;
      }
      .type {
        margin: 0 20px;
      }
    }
    .time-body {
      margin-top: 10px;
      font-size: 12px;

      background: #f5f9fd;
    }
  }
}
.msgrow {
  height: 36px;
}
::v-deep {
  .pagination-container {
    position: absolute;
    bottom: 32px;
    height: auto;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: transparent;
  }
  .el-input-group__append div.el-select .el-input__inner {
    border-left: 0 !important;
  }
  .el-collapse-item {
    padding: 0 10px;
  }
  .el-collapse-item__header {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .el-collapse,
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border: none;

    background: transparent;
  }
  .el-collapse-item__content {
    padding-bottom: 0px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
